<template>
  <div class="echarts" style="display: flex">
    <div :style="{height:'100vh',width:'40%'}" ref="myEchart"></div>
    <div style="width:60%;height: 400px;">
      <el-card class="box-card" style="width: 100%;height: 300px;padding: 0 20px;">
        <div slot="header" class="clearfix">
          <b>全国疫情</b>
        </div>
        <div class="totalXQ">
          <p class="itemList">确诊：<span style="color: red;font-weight: bold;">{{chinaAll.confirm}}</span> 人</p>
          <p class="itemList"> 治愈：<span style="color: red;font-weight: bold;">{{chinaAll.heal}}</span> 人</p>
          <p class="itemList"> 死亡：<span style="color: red;font-weight: bold;">{{chinaAll.dead}}</span> 人</p>
          <p class="itemList"> 外部输入：<span style="color: red;font-weight: bold;">{{chinaAll.importedCase}}</span> 人</p>
          <p class="itemList"> 新确诊：<span style="color: red;font-weight: bold;">{{chinaAll.nowConfirm}}</span> 人</p>
          <p class="itemList"> 新严重患者：<span style="color: red;font-weight: bold;">{{chinaAll.nowSevere}}</span> 人</p>
          <p class="itemList"> 疑似病例：<span style="color: red;font-weight: bold;">{{chinaAll.suspect}}</span> 人</p>
        </div>
      </el-card>
      <div style="height:300px;width:800px" id="myChart2"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import jsonp from "jsonp";
import 'echarts/map/js/china.js' // 引入中国地图数据
export default {
  name: "Map",
  props: ["userJson"],
  data() {
    return {
      chart: null,
      chinaAll: {}
    };
  },
  mounted() {
    this.chinaConfigure();
    this.txT()
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    chinaConfigure() {
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      jsonp('https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5', (err, res) => {
        if (err) {
          console.error(err.message);
        } else {
          let data = JSON.parse(res.data)
          this.chinaAll = data.chinaTotal
          console.log("所有结果：----->", data);
          let dataMix = data.areaTree[0].children
          let resultDataConfirm = []
          let resultDataDead = []
          dataMix.forEach(item => {
            //确诊人数
            resultDataConfirm.push({name: item.name, value: item.total.confirm});
            resultDataDead.push({name: item.name, value: item.total.dead});
          })
          //地图
          let options = { // 进行相关配置
            title: {
              text: `中国各地区疫情图`,
              subtext: `更新时间：${data.lastUpdateTime}`,
              left: 'center'
            },
            backgroundColor: "#fff",
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>确诊人数：{c} (人)'
            }, // 鼠标移到图里面的浮动提示框
            toolbox: {
              show: true,
              feature: {
                saveAsImage:{
                  type:'png',
                  name:'中国各地区疫情图',
                },
                restore:{
                  show :"true",
                  title:'还原'
                },
                dataView:{
                  show:true
                }
              }
            },
            dataRange: {
              show: false,
              min: 0,
              max: 1000,
              text: ['High', 'Low'],
              realtime: true,
              calculable: true,
              color: ['orangered', 'yellow', 'lightskyblue']
            },
            geo: { // 这个是重点配置区
              map: 'china', // 表示中国地图
              roam: true,
              label: {
                normal: {
                  show: true, // 是否显示对应地名
                  textStyle: {
                    color: 'rgba(0,0,0,0.4)'
                  }
                }
              },
              itemStyle: {
                normal: {
                  borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis: {
                  areaColor: null,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo' // 对应上方配置
              },
              {
                name: '确诊人数（人）', // 浮动框的标题
                type: 'map',
                geoIndex: 0,
                data: resultDataConfirm
              }
            ]
          }
          myChart.setOption(options)
        }
      })
      window.onresize = myChart.resize;
    },
    txT() {
      let myChart2 = echarts.init(document.getElementById('myChart2'));
      //条形图
      jsonp('https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5', (err, res) => {
        if (err) {
          console.error(err.message);
        } else {
          let data = JSON.parse(res.data)
          let allObj = data.chinaTotal
          let allArr = []
          for (const key in allObj) {
            allArr.push(allObj[key]);
          }
          console.log(allArr);
          let options2 = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            toolbox: {
              left: 0,
              feature: {
                magicType: {
                  show:true,
                  type: ['bar', 'line']
                }
              },
            },
            xAxis: {
              type: 'category',
              data: ['确诊', '治愈', '死亡', '新确诊', '疑似', '新高危', '输入病例', '未感染'],
              axisTick: {
                alignWithLabel: true
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: allArr,
                barWidth: '60%',
                type: 'bar'
              }
            ]
          };
          myChart2.setOption(options2)
        }
      })
    }
  }
}
</script>
<style>
.totalXQ > .itemList {
  margin: 10px 0;
}
</style>
